﻿<!doctype html>
<meta charset="utf-8">
<title>中科智晟养殖大数据平台</title>
<base href="${ctxPath}/">
<link href="css/bigdatamain/style.css" rel="stylesheet" type="text/css" media="all"/>
<script src="js/bigdatamain/echarts.min.js" charset="utf-8"></script>
<script src="js/jquery.min.js" charset="utf-8"></script>
<script src="js/map.js" charset="utf-8"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=IENn7ABARjQIkTeAKyh80VTkg2jYXf3K"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/custom/stylelist.js"></script>
<style>
  .BMap_cpyCtrl{
    display: none;
  }
  .anchorBL{
    display: none;
  }
</style>
<body>
<div class="bnt">
  <div class="topbnt_left fl">
    <ul>
      <li class="active"><a href="base/link/@/bigdata/activity.jhtml">鸡舍1</a></li>
      <li class="active"><a href="base/link/@/bigdata/activity.jhtml">鸡舍2</a></li>
    </ul>
  </div>
  <h1 class="tith1 fl">中科智晟养殖大数据平台</h1>
  <div class=" fr topbnt_right">
    <ul>
      <li><a href="admin.jhtml">返回</a></li>
    </ul>

  </div>
</div>
<!-- bnt end -->
<div class="left1 pleft1">
  <div class="lefttime"><h2 class="tith2">统计时间</h2>
    <div class="lefttime_text">
      <ul>
        <li class="bg active">今日</li>
        <li></li>
        <li class="bg">本周</li>
        <li></li>
        <li class="bg">本月</li>
        <li></li>
        <li class="bg">本季</li>
        <li></li>
        <li class="bg">本年</li>
      </ul>
    </div>
  </div>
  <div class="plefttoday"><h2 class="tith2">今日活动统计</h2>
    <div class="lefttoday_tit" style=" height:8%"><p class="fl">地区：甘孜</p>
      <p class="fr">2018-06-14</p></div>
    <div class="lefttoday_number">
      <div class="widget-inline-box text-center fl">
        <p>温度</p>
        <h3 class="ceeb1fd">54</h3>
        <!--        <h4 class="text-muted">环比<img src="img/bigdatamain/iconup.png" height="16"/>2%</h4>-->
      </div>
      <div class="widget-inline-box text-center fl">
        <p>湿度</p>
        <h3 class="c24c9ff">54</h3>
        <!--        <h4 class="text-muted">环比<img src="img/bigdatamain/icondown.png" height="16"/>3%</h4>-->
      </div>
      <div class="widget-inline-box text-center fl">
        <p>二氧化碳</p>
        <h3 class="cffff00">4</h3>
        <!--        <h4 class="text-muted">环比<img src="img/bigdatamain/icondown.png" height="16"/>3%</h4>-->
      </div>
      <div class="widget-inline-box text-center fl">
        <p>氨气</p>
        <h3 class="c11e2dd">4</h3>
        <!--        <h4 class="text-muted">环比<img src="img/bigdatamain/icondown.png" height="16"/>3%</h4>-->
      </div>
      <div class="widget-inline-box text-center fl">
        <p>光照强度</p>
        <h3 class="c11e2dd">4</h3>
        <!--        <h4 class="text-muted">环比<img src="img/bigdatamain/icondown.png" height="16"/>3%</h4>-->
      </div>
      <div class="widget-inline-box text-center fl">
        <p>风速</p>
        <h3 class="c11e2dd">4</h3>
        <!--        <h4 class="text-muted">环比<img src="img/bigdatamain/icondown.png" height="16"/>3%</h4>-->
      </div>
    </div>
    <!-- lefttoday_number end -->
    <!--  lefttoday_bar end-->
  </div>
  <div class="lpeftmidbot">
    <h2 class="tith2">温度实时数据</h2>
    <div id="lpeftbot" class="lpeftmidbotcont"></div>
  </div>
  <div class="lpeftbot">
    <h2 class="tith2">湿度实时数据</h2>
    <div id="lpeftmidbot" class="lpeftbotcont"></div>
  </div>
</div>
<!--  left1 end -->
<div class="left2">
  <div class="pleftbox2top">
    <h2 class="tith2">健康环境评分</h2>
    <div id="pleftbox2top" class="pleftbox2topcont"></div>
  </div>
  <div class="pleftbox2midd"><h2 class="tith2">二氧化碳实时数据</h2>
    <!-- <div id="pleftbox2midd" class="pleftbox2middcont"></div> -->
    <div class="pvr fl  lpeftb2otcont1 hdtop" style="height:82%;">

      <div id="pleftbox2bott_cont" class="pleftbox2middcont" style=" height:100%;"></div>
    </div>
  </div>
  <div class="lpeft2bot">
    <h2 class="tith2 ">光照强度实时数据</h2>
    <div id="prbottom_box1" class="lpeftb2otcont"></div>

  </div>
</div>
</div>
<div class="mrbox prbox">
  <div class="hdmrbox_top">
    <div class="mrbox_top_midd">
      <div class="hdmrboxtm-mbox"><h2 class="tith2 pt1">地图分析</h2>
        <!--        <img src="img/js.jpg">-->
        <!-- <div class="lefttoday_tit font14" style=" height:13%"><p class="fl"><i class="ricontop redr">12</i>民事活动</p>
           <p class="fr"><i class="ricontop bluer">12</i>佛事活动</p></div>-->
        <div style="width: 98%;height: 85%;margin-left: 1%;top: 2%" id="map_div">
          <!--<ul>
            <li class="bluer" style="top:28%;left:12%">15</li>
            <li class="redr" style="top:31%;left:18%">13</li>
            &lt;!&ndash;  石渠县&ndash;&gt;
            <li class="bluer" style="top:31%;left:33%">15</li>
            <li class="redr" style="top:34%;left:36%">13</li>
            &lt;!&ndash;  &ndash;&gt;
            <li class="bluer" style="top:12%;left:43%">15</li>
            <li class="redr" style="top:15%;left:47%">13</li>
            &lt;!&ndash;  &ndash;&gt;
            <li class="bluer" style="top:22%;left:36%">15</li>
            <li class="redr" style="top:25%;left:41%">13</li>
            &lt;!&ndash;  &ndash;&gt;
            <li class="bluer" style="top:23%;left:57%">15</li>
            <li class="redr" style="top:16%;left:53%">13</li>
            &lt;!&ndash;  &ndash;&gt;
            <li class="bluer" style="top:26%;left:64%">15</li>
            <li class="redr" style="top:22%;left:67%">13</li>
            &lt;!&ndash;  &ndash;&gt;
            <li class="bluer" style="top:7%;left:68%">15</li>
            <li class="redr" style="top:15%;left:69%">13</li>
            &lt;!&ndash;  丹巴&ndash;&gt;
            <li class="bluer" style="top:32%;left:77%">15</li>
            <li class="redr" style="top:35%;left:80%">13</li>
            &lt;!&ndash;  康定&ndash;&gt;
            <li class="bluer" style="top:28%;left:81%">15</li>
            <li class="redr" style="top:27%;left:84%">13</li>
            &lt;!&ndash;  泸定&ndash;&gt;
            <li class="bluer" style="top:34%;left:69%">15</li>
            <li class="redr" style="top:37%;left:73%">13</li>
            &lt;!&ndash;  雅江&ndash;&gt;
            <li class="bluer" style="top:48%;left:87%">15</li>
            <li class="redr" style="top:47%;left:83%">13</li>
            &lt;!&ndash;  九龙&ndash;&gt;
            <li class="bluer" style="top:48%;left:60%">15</li>
            <li class="redr" style="top:56%;left:62%">13</li>
            &lt;!&ndash;  理塘&ndash;&gt;
            <li class="bluer" style="top:68%;left:60%">15</li>
            <li class="redr" style="top:70%;left:63%">13</li>
            &lt;!&ndash;  巴塘&ndash;&gt;
            <li class="bluer" style="top:67%;left:67%">15</li>
            <li class="redr" style="top:67%;left:71%">13</li>
            &lt;!&ndash;  乡城&ndash;&gt;
            <li class="bluer" style="top:82%;left:70%">15</li>
            <li class="redr" style="top:84%;left:73%">13</li>
            &lt;!&ndash;  得荣&ndash;&gt;
            <li class="bluer" style="top:68%;left:60%">15</li>
            <li class="redr" style="top:70%;left:63%">13</li>
            &lt;!&ndash;  巴塘&ndash;&gt;
            <li class="bluer" style="top:71%;left:78%">15</li>
            <li class="redr" style="top:74%;left:81%">13</li>
            &lt;!&ndash;  稻城&ndash;&gt;

            <li class="bluer" style="top:31%;left:57%">15</li>
            <li class="redr" style="top:33%;left:53%">13</li>
            <li class="bluer" style="top:44%;left:47%">15</li>
            <li class="redr" style="top:48%;left:52%">13</li>
          </ul>-->
        </div>
      </div>
      <!--  map end-->
      <!-- <div class="pmrboxbottom"><h2 class="tith2 pt1">涉稳警情</h2>
          <div id="pmrboxbottom" class="pmrboxbottomcont" ></div>
      </div> -->
      <div class="mrbox_bottom_bott">
        <div class="rbottom_box1 hdwid"><h2 class="tith2">氨气实时数据</h2>
          <div id="prbottom_box2" class="prbottom_box1cont"></div>
        </div>
        <!-- <div class="rbottom_box2 hdwid"><h2 class="tith2">风速占比</h2>
           <div id="pleftbox2midd" class="prbottom_box1cont"></div>
         </div>-->
      </div>

    </div>
    <!-- mrbox_top_midd end -->
    <div class="mrbox_top_right">
      <div class="hdrightboxtop"><h2 class="tith2">今日消息提醒</h2>
        <div class="lefttoday_tit" style="height:4%"><p class="fl">状态：已调节</p>
          <p class="fr">时间段：2020-05-07</p></div>
        <div class="left2_table hdleft2_table">
          <ul>
            <li>
              <p class="fl"><b>系统通知</b><br>
                系统升级v2.0版本改变风格，数据展示 ，健康情况体检。<br>
              </p>
              <p class="fr pt17">2020-05-07</p>
            </li>
            <li class="bg">
              <p class="fl"><b>系统通知</b><br>
                系统通知，系统升级v1.0版本改变风格，设备录入 ，数据展示。<br>
              </p>
              <p class="fr pt17">2020-05-07</p>
            </li>
            <li>
              <p class="fl"><b>报警信息</b><br>
                设备编号4000122设备出现异常情况请排查。<br>
              </p>
              <p class="fr pt17">2020-05-07</p>
            </li>
            <li class="bg">
              <p class="fl"><b>告警信息</b><br>
                鸡舍2号温度过高，已经自动打开风机。<br>
              </p>
              <p class="fr pt17">2020-05-07</p>
            </li>
            <li>
              <p class="fl"><b>告警信息</b><br>
                鸡舍2号湿度过高，已经关闭喷淋系统。<br>
              </p>
              <p class="fr pt17">2020-05-07</p>
            </li>
            <li class="bg">
              <p class="fl"><b>告警信息</b><br>
                鸡舍2号氨气过高,请检查。<br>
              </p>
              <p class="fr pt17">2020-05-07</p>
            </li>


          </ul>
        </div>
      </div>


      <!-- <div class="mrbox_bottom">
          <div class="rbottom_box1"><h2 class="tith2">高危人员分类分析</h2>
          <div id="prbottom_box2" class="prbottom_box1cont"></div></div>
          <div class="rbottom_box2"><h2 class="tith2">活动人口统计</h2>
          <div id="pleftbox2midd" class="prbottom_box1cont" ></div></div>
          <div class="rbottom_box3"><h2 class="tith2 pt2">流动人口年龄分析</h2>
          <div id="prbottom_box3" class="prbottom_box1cont"></div></div>

      </div> -->
    </div>
  </div>
</div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('lpeftmidbot'));
  option = {
    color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 30,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 5,

      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.6)'
      },
      data: ['鸡舍二号', '鸡舍一号']
    },
    grid: {
      left: 20,
      right: 30,
      top: 40,
      bottom: 10,
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      data: ['05-01', '05-02', '05-03', '05-04', '05-05']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
    },
    series: [

      {
        name: '鸡舍一号',
        type: 'line',
        stack: '总量',
        data: [22, 18, 20, 20, 20]
      },
      {
        name: '鸡舍二号',
        type: 'line',
        stack: '总量',
        data: [22, 22, 22, 22, 22]
      }
    ]
  };
  myChart.setOption(option);
</script>

<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('lpeftbot'));
  option = {
    color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 30,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 5,

      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.6)'
      },
      data: ['鸡舍二号', '鸡舍一号']
    },
    grid: {
      left: 20,
      right: 30,
      top: 40,
      bottom: 10,
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      data: ['05-01', '05-02', '05-03', '05-04', '05-05']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
    },
    series: [

      {
        name: '鸡舍一号',
        type: 'line',
        stack: '总量',
        data: [22, 18, 20, 20, 20]
      },
      {
        name: '鸡舍二号',
        type: 'line',
        stack: '总量',
        data: [22, 22, 22, 22, 22]
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('pleftbox2top'));
  option = {
    color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 20,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 10,
      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.7)'
      },
      data: ['温度', '湿度', '二氧化碳', '氨气', '光照强度', '风速']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '45%',
        center: ['55%', '65%'],
        data: [
          {value: 335, name: '温度'},
          {value: 310, name: '湿度'},
          {value: 234, name: '二氧化碳'},
          {value: 135, name: '氨气'},
          {value: 158, name: '光照强度'},
          {value: 138, name: '风速'}

        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('pleftbox2midd'));
  option = {
    color: ['#f8e19a', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 20,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 10,
      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.7)'
      },
      data: ['鸡舍二号', '鸡舍一号']
    },
    series: [
      {
        name: '访问来源',
        type: 'pie',
        radius: '55%',
        center: ['50%', '65%'],
        data: [
          {value: 335, name: '鸡舍二号'},
          {value: 310, name: '鸡舍一号'}
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('pmrboxbottom'));
  option = {
    color: ['#d2d17c', '#00b7ee', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    legend: {
      top: 10,
      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.7)'
      },
      data: ['涉恐人员', '涉稳人员', '涉毒人员', '在逃人员', '重点上访人员', '肇事肇祸精神病人', '刑事犯罪前科人员']
    },
    grid: {
      left: 10,
      right: 10,
      top: 40,
      bottom: 10,
      containLabel: true
    },

    xAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.3)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.01)'
          }
        },
        data: ['康定市', '泸定县', '丹巴县', '九龙县', '新龙县', '巴塘县', '得荣县', '理塘县', '甘孜县', '道孚县', '德格县', '色达县']
      }
    ],
    yAxis: [
      {
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.3)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.01)'
          }
        },

        axisLabel: {
          formatter: '{value} ml'
        },
        type: 'value'
      }

    ],
    series: [

      {
        name: '涉恐人员',
        type: 'bar',
        barWidth: 30,
        stack: '搜索引擎',
        data: [620, 732, 701, 734, 1090, 1130, 1120, 620, 732, 701, 734, 1090,]
      },
      {
        name: '涉稳人员',
        type: 'bar',
        stack: '搜索引擎',
        data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
      },
      {
        name: '涉毒人员',
        type: 'bar',
        stack: '搜索引擎',
        data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
      },
      ,
      {
        name: '在逃人员',
        type: 'bar',
        stack: '搜索引擎',
        data: [120, 132, 101, 134, 290, 230, 220, 101, 134, 290, 230, 220]
      },
      {
        name: '重点上访人员',
        type: 'bar',
        stack: '搜索引擎',
        data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
      },
      {
        name: '肇事肇祸精神病人',
        type: 'bar',
        stack: '搜索引擎',
        data: [60, 72, 71, 74, 190, 130, 110, 71, 74, 190, 130, 110]
      },
      {
        name: '重大刑事犯罪前科人员',
        type: 'bar',
        stack: '搜索引擎',
        data: [62, 82, 91, 84, 109, 110, 120, 91, 84, 109, 110, 120]
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('pleftbox2bott_cont'));
  option = {
    color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 30,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 5,

      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.6)'
      },
      data: ['鸡舍二号', '鸡舍一号']
    },
    grid: {
      left: 20,
      right: 30,
      top: 40,
      bottom: 10,
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      data: ['05-01', '05-02', '05-03', '05-04', '05-05']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
    },
    series: [

      {
        name: '鸡舍一号',
        type: 'line',
        stack: '总量',
        data: [22, 18, 20, 20, 20]
      },
      {
        name: '鸡舍二号',
        type: 'line',
        stack: '总量',
        data: [22, 22, 22, 22, 22]
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('prbottom_box1'));
  option = {
    color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 30,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 5,

      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.6)'
      },
      data: ['鸡舍二号', '鸡舍一号']
    },
    grid: {
      left: 20,
      right: 30,
      top: 40,
      bottom: 10,
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      data: ['05-01', '05-02', '05-03', '05-04', '05-05']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
    },
    series: [

      {
        name: '鸡舍一号',
        type: 'line',
        stack: '总量',
        data: [22, 18, 20, 20, 20]
      },
      {
        name: '鸡舍二号',
        type: 'line',
        stack: '总量',
        data: [22, 22, 22, 22, 22]
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('prbottom_box2'));
  option = {
    color: ['#d2d17c', '#7fd7b1', '#5578cf', '#5ebbeb', '#d16ad8', '#f8e19a', '#00b7ee', '#81dabe', '#5fc5ce'],
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 30,
      top: 0,
      bottom: 20
    },
    legend: {
      top: 5,

      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.6)'
      },
      data: ['鸡舍二号', '鸡舍一号']
    },
    grid: {
      left: 20,
      right: 30,
      top: 40,
      bottom: 10,
      containLabel: true
    },
    toolbox: {
      feature: {
        saveAsImage: {}
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
      data: ['05-01', '05-02', '05-03', '05-04', '05-05']
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,.1)'
        }
      },
      axisLabel: {
        color: "rgba(255,255,255,.7)"
      },
    },
    series: [

      {
        name: '鸡舍一号',
        type: 'line',
        stack: '总量',
        data: [22, 18, 20, 20, 20]
      },
      {
        name: '鸡舍二号',
        type: 'line',
        stack: '总量',
        data: [22, 22, 22, 22, 22]
      }
    ]
  };
  myChart.setOption(option);
</script>

<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('prbottom_box3'));
  option = {
    backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 60,
      right: 20,
      top: 40,
      bottom: 40
    },

    toolbox: {
      feature: {
        dataView: {show: true, readOnly: false},
        magicType: {show: true, type: ['line', 'bar']},
        restore: {show: true},
        saveAsImage: {show: true}
      }
    },
    legend: {
      top: 10,
      textStyle: {
        fontSize: 10,
        color: 'rgba(255,255,255,.7)'
      },
      data: ['男', '女', '总数']
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          color: "rgba(255,255,255,.7)"
        },

        data: ['0-6', '6-18', '18-28', '28-55', '55以上'],
        axisPointer: {
          type: 'shadow'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '',
        min: 0,
        max: 250,
        interval: 50,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.3)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.01)'
          }
        },

        axisLabel: {
          formatter: '{value} ml'
        }
      },
      {
        type: 'value',
        name: '',
        max: 25,
        interval: 5,
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0)'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,0)'
          }
        }
      }
    ],
    series: [

      {
        name: '男',
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#b266ff'},
                {offset: 1, color: '#121b87'}
              ]
            )
          }
        },
        data: [2.0, 4.9, 7.0, 23.2, 25.6]
      },
      {
        name: '女',
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#00f0ff'},
                {offset: 1, color: '#032a72'}
              ]
            )
          }
        },
        data: [8.6, 5.9, 9.0, 26.4, 28.7]
      },
      {
        name: '总数',
        type: 'bar',
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                {offset: 0, color: '#fffb34'},
                {offset: 1, color: '#032a72'}
              ]
            )
          }
        },
        yAxisIndex: 1,
        data: [6.0, 5.2, 3.3, 4.5, 6.3]
      }
    ]
  };
  myChart.setOption(option);
</script>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('pmrmidd'));
  option = {
    color: ['#f1ff00', '#00c1ff', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'],
    // backgroundColor: 'rgba(1,202,217,.2)',
    grid: {
      left: 20,
      right: 20,
      top: 30,
      bottom: 30
    },
    radar: {
      name: {
        textStyle: {
          fontSize: 10,
          color: 'rgba(255,255,255,.8)'
        }
      },
      splitLine: {
        lineStyle: {
          color: [
            'rgba(1,202,217,.01)', 'rgba(1,202,217,.01)'
          ].reverse()
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        lineStyle: {
          color: 'rgba(1,202,217,.7)'
        }
      },
      indicator: [
        {name: '红色警情', max: 6500},
        {name: '橙色警情', max: 16000},
        {name: '黄色警情', max: 30000},
        {name: '绿色警情', max: 44000}
      ]
    },
    series: [{
      name: '',
      type: 'radar',
      radius: [5, 100],
      center: ['50%', '50%'],
      data: [
        {
          value: [4300, 10000, 28000, 19000],
          name: ''
        },
        {
          value: [5000, 14000, 22000, 41000],
          name: ''
        }
      ]
    }]
  };
  myChart.setOption(option);


</script>
</body>
</html>
